import React, { Component } from 'react';
import {
    StyleSheet, View, FlatList, Text,
    Dimensions, Image, TouchableHighlight, Platform, Alert,TouchableOpacity
} from 'react-native';
import {Flex} from 'antd-mobile';
import {FilmModule} from './../NativeToastAndroid';
export default class FilmList extends Component {
    constructor(props) {
        super(props);
        this.state = {
            isRefreshing:false,
            dataSource:[],
            page_no:1,
            total_results:0,
            total_page:0,
            toolbarColor:0
        };
    }

    componentWillMount() {
        //获取数据
        this.getFilmList(1);
    }
    _reFreshing(isRefreshing){
        if(isRefreshing == true){
            this.setState({
                isRefreshing:false
            })
        }else{
            this.setState({
                isRefreshing:true
            })
        }
    }
    getFilmList = (page_no)=>{
        if(Platform.OS === 'ios'){

        }else if(Platform.OS === 'android') {
            FilmModule.getFilmList(page_no,10,(data)=>{
                if(data.result === 'success'){
                    const returnData = JSON.parse(data.jsonBody);
                    let {film_list,current_page,total_results,total_page} = returnData.data;
                    if(returnData.code === 0) {
                        let {dataSource} = this.state;
                        let temp = dataSource.concat(film_list);
                        this.setState({
                            dataSource:temp,
                            page_no:current_page,
                            total_results:total_results,
                            total_page:total_page,
                            isRefreshing:false
                        })
                    }else{
                        const message = returnData.message;
                        this._reFreshing(this.state.isRefreshing);
                        Alert.alert(
                            '提示',
                            message,
                            [
                                {text:'OK'},
                            ]
                        )
                    }
                }else{
                    this._reFreshing(this.state.isRefreshing);
                    Alert.alert(
                        '提示',
                        '亲！服务器返回异常',
                        [
                            {text:'OK'},
                        ]
                    )
                }
            })
        }
    }

    //数据为空时渲染
    _renderEmpty = () => (
        <View style={{height:height-90}}><Text style={styles.bottomTipStyle}>暂无更多数据</Text></View>
    );

    //底部提示
    _renderFooter = () => (
        <View><Text style={styles.bottomTipStyle}>暂无更多数据</Text></View>
    );

    //下拉刷新
    _onRefresh = () => {
        this.setState({
            dataSource:[]
        })
        this.getFilmList(1);
    };

    // 上拉加载更多
    _onEndReached = () => {
        let {isRefreshing,page_no,total_page,total_results} = this.state;
        console.log(isRefreshing,page_no,total_page,total_results);
        if(page_no+1>total_page){
            return;
        }
        this.getFilmList(page_no+1);
    };

    _onPressItem = (url,flimname) => {
        if(Platform.OS === 'ios'){

        }else if(Platform.OS === 'android'){
            FilmModule.onFilmItemClick(flimname,url);
        }
    };
    _goBack=()=>{
        if(Platform.OS === 'ios'){

        }else if(Platform.OS === 'android'){
            FilmModule.onNavigationClick();
        }
    }
    _renderItem = ({item,index}) => (
        <TouchableHighlight onPress={()=>this._onPressItem(item.link,item.name)} key={index}>
            <View style={styles.listStyle} key={index} >
                <Flex direction="row" justify="start">
                    <Image style={styles.filmImage} source={{uri:item.pic_url}}/>
                        <Flex direction="column" align="start" justify="center" style={{width:250}}>
                        <View>
                            <Text style={styles.filmTitle}>{item.name}</Text>
                            <Text style={styles.filmScore}>评分：{item.score}</Text>
                            <Text style={styles.filmDirector}>导演：{item.director}</Text>
                            <Text style={styles.filmActors}>上映时间：{forrmatDate(item.release_date)}</Text>
                            <Text style={styles.filmActors}>主演：
                                {
                                    item.main_actor.map((name,index)=>{
                                        return(
                                            <Text key={index}>{name}</Text>
                                        )
                                    })
                                }
                            </Text>
                            <Text numberOfLines={1} style={styles.filmComment}>戳心：{item.review}</Text>
                        </View>
                    </Flex>
                    <Flex direction="column" style={{marginTop:-45}}>
                        <View style={{width:28,height:30,backgroundColor:"#F8981C"}}>
                            <Text style={styles.timeTextStyle}>
                                {forrmatTime(item.show_date,'day')}
                            </Text>
                            <Text style={styles.timeTextStyle}>
                                {forrmatTime(item.show_date,'month')}
                            </Text>
                        </View>
                        <View style={styles.timeStyle}/>
                    </Flex>
                </Flex>
            </View>
        </TouchableHighlight>
    );

    render() {
        return (
            <View>
                <View>
                <Flex style={{height:50,backgroundColor:'#3866a6'}} direction="row" justify="start">
                        <View style={{marginLeft:16}}>
                            <TouchableOpacity activeOpacity={0.5} onPress={this._goBack}>
                                <Image
                                    style={{width:24,height:24}} source={require('./../../../file/ic_arrow_back_white_24dp.png')} />
                            </TouchableOpacity>
                        </View>
                        <Text style={styles.headerText}>西科电影</Text>
                </Flex>
                </View>
                <View style={styles.headerStyle}>
                    <Flex justify="between">
                        <Text style={styles.filmPosition}>老区露天电影院（两场连映）</Text>
                        <Text style={styles.filmTime}>周五19:10</Text>
                    </Flex>
                </View>
                <View style={{backgroundColor:"#C5BEBE",height:height-90,justifyContent:'flex-start'}}>
                    <FlatList
                        data={this.state.dataSource}
                        renderItem={this._renderItem}
                        refreshing={this.state.isRefreshing}
                        onRefresh={this._onRefresh}
                        onEndReached={this._onEndReached}
                        onEndReachedThreshold={0.2}
                        ListFooterComponent={this._renderFooter}
                        ListEmptyComponent={this._renderEmpty}
                    />
                </View>
            </View>
        );
    }
}
function forrmatTime(getTime,type) {
    let time = Date.parse(getTime);
    time = new Date(time);
    console.log("this is time:"+time)
    let month = time.getMonth()+1;
    let day = time.getDate();
    console.log('this is month and day：'+month+'   '+day)
    if(type==='day'){
        return month+'月'
    }else{
        return day+'日'
    }
}
function forrmatDate(getTime) {
    let time = Date.parse(getTime);
    time = new Date(time);
    let year  = time.getFullYear();
    let month = time.getMonth()+1;
    let day = time.getDate();
    let returnTime = [year,month,day].join('-');
    return returnTime;
}
const { height } = Dimensions.get('window');
const styles = StyleSheet.create({
    headerStyle: {
        borderBottomColor:'#979797',
        borderBottomWidth:0.5
    },
    headerText:{
        marginLeft:27,
        color:'#fff',
        fontSize:18,
    },
    filmPosition:{
        fontSize:14,
        lineHeight:20,
        margin:8
    },
    filmTime:{
        fontSize:14,
        lineHeight:20,
        margin:8,
        marginRight:44,
        color:'#ffffff'
    },
    listStyle:{
        backgroundColor:'#FFFFFF',
        height:95.5,
        width:Dimensions.get('window').width,
        marginBottom:0.5,
    },
    filmImage:{
        marginTop:7,
        marginLeft:5,
        marginRight:10,
        height:80.4,
        width:55
    },
    filmTitle:{
        color:'#000000',
        fontSize:12,
        lineHeight:17
    },
    filmScore:{
        color:'#000',
        fontSize:9,
        lineHeight:13
    },
    filmDirector:{
        color:'#9B9B9B',
        fontSize:9,
        lineHeight:13,
        marginTop:7.2
    },
    filmActors:{
        fontSize:9,
        lineHeight:13,
        color:'#9B9B9B',
    },
    filmComment:{
        fontSize:9,
        lineHeight:13,
        color:'#9B9B9B',
    },
    timeStyle:{
        borderColor:'#F8981C',
        borderBottomColor:'#fff',
        borderLeftWidth:14,
        borderRightWidth:14,
        borderBottomWidth:14,
        borderTopWidth:0
    },
    timeTextStyle:{
        textAlign:'center',
        fontSize:11,
        color:'#fff',
        backgroundColor:'#F8981C'
    },
    bottomTipStyle:{
        textAlign:'center',
        height: 60,
        backgroundColor:'#FFF',
        paddingTop:5,
        paddingBottom: 5
    }
});
